<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HuoCMS安装步骤</title>
    <link rel="stylesheet" href="/static/install/css/reset.css">
    <link rel="stylesheet" href="/static/install/css/Installation.css">
</head>
<body>
    <div class="container">
        <div class="public_width">
            <h2 class="title">欢迎您使用HuoCMS!</h2>
            <div class="main">
                <!-- 步骤 -->
                <div class="step">
                    <div class="step_width">
                        <!-- 进度条高亮 -->
                        <div class="step_active" style="width: 60%;"></div>

                        <div class="step_box">
                            <div class="step_bin step_first_txt step_textactive">
                                <span>01</span>
                                <p>许可协议</p>
                            </div>
                            <div class="step_bin step_second_txt step_textactive">
                                <span>02</span>
                                <p>环境监测</p>
                            </div>
                            <div class="step_bin step_third_txt step_textactive">
                                <span>03</span>
                                <p>配置系统</p>
                            </div>
                            <div class="step_bin step_fourth_txt">
                                <span>04</span>
                                <p>创建数据</p>
                            </div>
                            <div class="step_bin step_fourth_txt">
                                <span>05</span>
                                <p>安装完成</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="main_box">
                    <!-- 配置系统 -->
                    <form class="configure" action="/install_create" method="post">
                        <div class="flex">
                        <!-- 数据库信息 -->
                        <div class="database">
                            <h3>数据库信息</h3>
                            <div class="database_form">
                                <div class="configure_fill">
                                    <p class="configure_fill_title"><span class="star">*</span>数据库地址</p>
                                    <input class="hc-required" type="text" name="hostname" placeholder="一般为127.0.0.1 或 localhost" value="127.0.0.1" required/>
                                    <p class="Required_Tips" style="color:  #f54412;">请输入数据库地址!</p>
                                </div>
                                <div class="configure_fill">
                                    <p class="configure_fill_title"><span class="star">*</span>数据库端口</p>
                                    <input class="hc-required" type="text" name="hostport" placeholder="一般为3306" value="3306" required/>
                                    <p class="Required_Tips" style="color:  #f54412;">请输入数据库端口!</p>
                                </div>
                                <div class="configure_fill">
                                    <p class="configure_fill_title"><span class="star">*</span>数据库名</p>
                                    <input class="hc-required" type="text" name="database" value="huo_cms" required/>
                                    <p class="Required_Tips" style="color:  #f54412;">请输入数据库名!</p>
                                </div>
                                <div class="configure_fill">
                                    <p class="configure_fill_title"><span class="star">*</span>数据库账号</p>
                                    <input class="hc-required" type="text" name="username" value="root" required/>
                                    <p class="Required_Tips" style="color:  #f54412;">请输入数据库账号!</p>
                                </div>
                                <div class="configure_fill">
                                    <p class="configure_fill_title"><span class="star">*</span>数据库密码</p>
                                    <div class="configure_position" >
                                        <input id="db_pass" type="password" name="password" class="configure_password hc-required" required/>
                                    </div>
                                    <p class="Required_Tips" id="error_db" style="color:  #f54412;">请输入数据库密码!</p>
                                </div>
                                <div class="configure_fill">
                                    <p class="configure_fill_title"><span class="star">*</span>数据库表前缀</p>
                                    <input class="hc-required" type="text" name="prefix" value="hc_" required/>
                                    <p class="Required_Tips" style="color:  #f54412;">请输入数据库表前缀!</p>
                                </div>
                                <div class="configure_fill">
                                    <p class="configure_fill_title"><span class="star">*</span>数据库编码</p>
                                    <input class="hc-required" type="text" name="charset" value="utf8mb4" required/>
                                    <p class="Required_Tips" style="color:  #f54412;">请输入数据库表前缀!</p>
                                </div>
                            </div>
                        </div>
                        <!-- 管理员信息 -->
                        <div class="admininfo">
                            <h3>管理员信息</h3>
                            <div class="admininfo_form">
                                <div class="configure_fill">
                                    <p class="configure_fill_title"><span class="star">*</span>管理员昵称</p>
                                    <input class="hc-required" type="text" name="admin" value="admin" required/>
                                    <p class="Required_Tips" style="color:  #f54412;">请输入管理员昵称!</p>
                                </div>
                                <div class="configure_fill">
                                    <p class="configure_fill_title"><span class="star">*</span>管理员账号</p>
                                    <input class="hc-required" type="text" name="email" value="admin@admin.com" required/>
                                    <p class="Required_Tips" style="color:  #f54412;">请输入管理员账号!</p>
                                </div>
                                <div class="configure_fill">
                                    <p class="configure_fill_title"><span class="star">*</span>管理员密码</p>
                                    <input class="hc-required" type="password" name="admin_pass" required/>
                                    <p class="Required_Tips" style="color:  #f54412;">请输入管理员密码!</p>
                                </div>
                                <div class="configure_fill">
                                    <p class="configure_fill_title"><span class="star">*</span>请确认密码</p>
                                    <input class="hc-required" type="password" name="admin_pass_confirm" required/>
                                    <p class="Required_Tips" style="color:  #f54412;">请输入请确认密码!</p>
                                </div>
                            </div>
                        </div>
                        </div>

                        <div class="configure_operation">
                            <button><a href="/install_smonitor">上一步</a></button>
                            <button class="step_third">创建数据</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="center">
                <span>Copyright © 2021 <a href="http://www.huocms.com">HuoCMS</a>
                    All Rights Reserved.
                    <a href="https://beian.miit.gov.cn/#/Integrated/index">苏ICP备2021024265号</a>  Powered by
                    <a href="http://www.huocms.com">HuoCMS</a>
                </span>
                <span>Designed by <a href="http://www.pailiu.com">派流</a></span>
            </div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="/static/install/js/jquery-1.11.3.min.js"></script>
    <script src="/static/install/js/coco-message.js"></script>
    <script>
        // 配置系统
        $('.step_third').click(function(){
            $('.hc-required').each(function () {
                    if ($(this).val() == "") {
                        $(this).siblings('.Required_Tips').css('opacity','1');
                        $('.configure_password').parent().siblings('.Required_Tips').css('opacity','1');
                    } else {
                        $(this).siblings('.Required_Tips').css('opacity','0');
                    }
            })
            $(this).submit();
        });

        $("#db_pass").blur( function () {
            let val = $("form").serialize();
            $.ajax({
                method:"post",
                url: "/install_testPass",
                data: val,
                success: function(res){
                    if(res.code != 0){
                        $('#error_db').text(res.msg);
                        $('#error_db').css('opacity','1');
                    }else {
                        $('#error_db').css('opacity','0');
                    }
                }})
        } );
    </script>
</body>
</html>